<template>
	<div class="statistics-region">
		<component
			:is="datePicker"
			v-model="date"
			:clearable="false"
		/>
		<h4>{{ titleEnum[Math.floor(+route.query.type)] }}</h4>
		<div class="table">
			<div class="item title">
				<p v-for="item in [...tableData.column, ...valueLable[Math.floor(+route.query.type)]]" :key="item">
					{{ item }}
				</p>
			</div>
			<div class="item-wrap">
				<div
					class="item"
					v-for="(item, index) in tableData.list"
					:key="index"
					@click="toPage(item)"
				>
					<p>{{ index + 1 }}</p>
					<p>{{ item.name }}</p>
					<p v-for="key in valueKey[Math.floor(+route.query.type)]" :key="key">
						{{ list.includes(key) ? `${item[key]}%` : item[key] }}
					</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, watch, ref } from 'vue'
import datePicker from '@/components/datePicker'
import {
	zclbar,
	fxyhltj,
	zgyhltj,
	zcqk,
	zclbar_check,
	fxyhltj_check,
	zgyhltj_check,
	zcqk_ckeck,
	ckhlccbar,
	gdjsbtbar,
	ddzxcwgcdbar,
	wgsyyhsyqbar,
	wzcfw,
	wzcfw_check,
	clycdsspbqk,
	housescj_dblbar,
	housescjjc_dblbar,
	housesjzhc_dblbar,
	housesqjhc_dblbar,
	housessjhc_dblbar,
	fztsss,
	zctj_hc_bar,
	zctj_hc_bar_three,
} from '@/service/village'

import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()

const list = [
	'yhfxl',
	'yhzgl',
	'dbl',
	'ccl',
	'value',
]

const titleEnum = {
	11: '行政区域自查率排名',
	12: '行政区域发现隐患率统计',
	13: '行政区域整改隐患率统计',
	14: '行政区域自查次数统计',
	15: '行政区域未自查数量统计',
	21: '行政区域检查率排名',
	22: '行政区域发现隐患率统计',
	23: '行政区域整改隐患率统计',
	24: '行政区域检查次数统计',
	25: '行政区域未检查数量统计',
	31: '行政区域达标率排名',
	32: '行政区域拆除率排名',
	33: '行政区域安装统计',
	34: '电动自行车违规停放充电',
	35: '违规使用瓶装液化石油气',
	36: '车辆与充电设施配比情况',
	37: '行政区域安装辅助逃生设施以及固定楼梯通向屋顶的排名',
	41: '行政区域核验率排名',
	42: '行政区域三层及以上房屋核验进度',
}

const valueLable = {
	11: ['房屋总栋数', '自查房屋总数', '自查率'],
	12: ['自查总数(栋)', '隐患发现数量(栋)', '隐患发现率'],
	13: ['隐患发现数量(个)', '隐患整改数量(个)', '隐患整改率'],
	14: ['自查总数', '自查次数'],
	15: ['未自查数量'],
	21: ['房屋总栋数', '检查房屋总数', '检查率'],
	22: ['检查总数(栋)', '隐患发现数量(栋)', '隐患发现率'],
	23: ['隐患发现数量(个)', '隐患整改数量(个)', '隐患整改率'],
	24: ['检查总数', '检查次数'],
	25: ['未检查数量'],
	31: ['房屋总数', '已达标数量(栋)', '未达标数量(栋)', '达标率'],
	32: ['现有数量(个)', '已拆除数量(个)','拆除率'],
	33: ['房屋总栋数', '安装房屋栋数', '安装率'],
	34: ['电动自行车数量(辆)', '清理数量(辆)'],
	35: ['清理石油液化气瓶数量(个)'],
	36: ['电动车数', '现有充电接口数量', '收取服务费个数(村)', '小于0.513元', '等于0.513元', '大于0.513元'],
	37: ['安装软梯逃生绳等辅助逃生设施的栋数', '楼内有固定楼梯通向屋顶的栋数'],
	41: ['房屋总栋数', '已核验数量', '未核验数量', '核验率'],
	42: ['房屋总栋数', '已核验数量', '未核验数量', '核验率'],
}
const valueKey = {
	11: ['zcount', 'zccount', 'zcl'],
	12: ['zccount', 'yhcount', 'yhfxl'],
	13: ['yhcount', 'zgcount', 'yhzgl'],
	14: ['zccount', 'fwzccs'],
	15: ['wzccount'],
	21: ['zcount', 'jccount', 'zcl'],
	22: ['zccount', 'yhcount', 'yhfxl'],
	23: ['yhcount', 'zgcount', 'yhzgl'],
	24: ['zccount', 'fwzccs'],
	25: ['wzccount'],
	31: ['zcount', 'ydb', 'wdb', 'dbl'],
	32: ['zcount', 'ccfhwggptzlsl', 'ccl'],
	33: ['zcount', 'xggdjsbpds', 'value'],
	34: ['bdfwjzrydddzxcsl', 'qlddcsl'],
	35: ['zxqlyhsyqsl'],
	36: ['bdfwjzrydddzxcsl', 'cdjksl', 'sqfwfsl', 'xy', 'xd', 'dy'],
	37: ['sfazfztsss', 'ywgdlttxwd'],
	41: ['zcount', 'zccount', 'wzccount', 'zcl'],
	42: ['zcount', 'zccount', 'wzccount', 'zcl'],
}

const date = ref(JSON.parse(route.query.date))
const tableData = reactive({
	column: [
		'序号',
		'行政区域',
	],
	list: []
})

const getData = async () => {
	const params = {
		date: date.value,
		code: route.query.code,
	}
	route.query.roletype && (params.roletype = +route.query.roletype)
	const result = +route.query.type === 11 ? await zclbar(params)
		: +route.query.type === 12 ? await fxyhltj(params)
			: +route.query.type === 13 ? await zgyhltj(params)
				: +route.query.type === 14 ? await zcqk(params)
					: +route.query.type === 15 ? await wzcfw(params)
						: +route.query.type === 21 ? await zclbar_check(params)
							: +route.query.type === 22 ? await fxyhltj_check(params)
								: +route.query.type === 23 ? await zgyhltj_check(params)
									: +route.query.type === 24 ? await zcqk_ckeck(params)
										: +route.query.type === 25 ? await wzcfw_check(params)
											: +route.query.type === 31.1 ? await housescj_dblbar(params)
												: +route.query.type === 31.2 ? await housescjjc_dblbar(params)
													: +route.query.type === 31.3 ? await housesjzhc_dblbar(params)
														: +route.query.type === 31.4 ? await housesqjhc_dblbar(params)
															: +route.query.type === 31.5 ? await housessjhc_dblbar(params)
																: +route.query.type === 32 ? await ckhlccbar(params)
																	: +route.query.type === 33 ? await gdjsbtbar(params)
																		: +route.query.type === 34 ? await ddzxcwgcdbar(params)
																			: +route.query.type === 35 ? await wgsyyhsyqbar(params)
																				: +route.query.type === 36 ? await clycdsspbqk(params)
																					: +route.query.type === 37 ? await fztsss(params)
																						: +route.query.type === 41 ? await zctj_hc_bar(params)
																							: +route.query.type === 42 ? await zctj_hc_bar_three(params)
																								: {}
	tableData.list = (result?.data?.data || result?.data)?.map(item => {
		return {
			...item,
			name: item.name || item.village || item.town || item.xzq,
			code: item.code || item.villagedm || item.towndm || item.xzqdm
		}
	})
}

const toPage = (record) => {
		if (
			(+route.query.role >= 4 && [15, 25].includes(+route.query.type))
			|| (+route.query.role >= 4 && Math.floor(+route.query.type) === 31)
		) {
		router.push({
			name: 'statistics-db-data',
			query: {
				code: record.code,
				type: route.query.type,
				date: route.query.date,
			}
		})
	} else if (+route.query.role < 4) {
		router.push({
			name: 'statistics-region',
			query: {
				code: record.code,
				type: route.query.type,
				date: route.query.date,
				role: +route.query.role + 1,
				roletype: route.query.roletype
			}
		})
	} else {
		return
	}
}

watch(() => [route.query.code, date.value], () => {
	getData()
}, { deep: true, immediate: true })
</script>

<style scoped lang="less">
.statistics-region {
	h4 {
		line-height: 40px;
		padding: 13px 20px;
		font-size: 30px;
		font-weight: 600;
		color: #fff;
		background: var(--van-primary-color);
	}
	:deep(.date-picker) {
		padding: 24px 32px;
		.date {
			background: #F6F7F8;
			border-radius: 16px;
		}
	}
	.table {
		margin: 24px;
	}
	.item-wrap {
		overflow: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}
		.item:nth-of-type(1) {
			border-top: 0;
		}
	}
	.title {
		p {
			font-weight: 600;
		}
	}
	.item {
		display: flex;
		min-height: 40px;
		line-height: 40px;
		border: 1px solid var(--border-color);
		border-top: 0;
		box-sizing: border-box;
		&:nth-of-type(1) {
			border-top: 1px solid var(--border-color);
		}
		p {
			flex: 1;
			padding: 12px;
			border-left: 1px solid var(--border-color);
			&:nth-of-type(1) {
				flex: none;
				width: 80px;
				border-left: 0;
			}
		}
	}
}
</style>
